
<template>
  <div>
      <header></header>
      <main>
          <div class="home_ser">
          <van-dropdown-menu class="shop">
            <van-dropdown-item  v-model="value1" :options="option1" />
          </van-dropdown-menu>
          <van-icon class="moreAdd" name="plus" />
        </div>
        
        <input class="search" type="text" placeholder="搜索">
        <van-swipe :autoplay="3000"
        :height="104" indicator-color="black">
            <van-swipe-item><img style="width:100%;" src="../images/board2.png" alt=""></van-swipe-item>
           <van-swipe-item><img style="width:100%;" src="../images/board3.png" alt=""></van-swipe-item>
           <van-swipe-item><img style="width:100%;" src="../images/Superbanner.png" alt=""></van-swipe-item>
        </van-swipe>
        <div class="coupons">
            <p>优惠券专区</p>
            <div>
                <p>
                 <span>
                    <span>￥<b>7</b>&nbsp;肉禽七元券</span>
                    <span>指定商品满35减7</span>
                 </span>
                 <b class="get">领取</b>
                </p>
                <p>
                 <span>
                    <span>￥<b>5</b>&nbsp;只限大润发</span>
                    <span>指定商品满25减5</span>
                 </span>
                 <b class="get">领取</b>
                </p>
            </div>
         </div>
         <div class="ad">
             <dl>
                 <router-link tag="h2" to="/superm_shop/5dbc18d4440b810ee8ed76a1">超值拼团</router-link>
                 <p>羊肉低至每斤30元</p>
                 <div>
                     <router-link tag="dt" v-for="(item,i) in toproduct" :key="i" :to="`/detail/${item._id}`"><img :src="item.coverImg" alt=""></router-link>
                   
                 </div>
                 
             </dl>
              <dl>
                 <router-link tag="h2" to="/superm_shop/5dbc18a8440b810ee8ed769e">速递鲜花</router-link>
                 <p>送给心仪的TA</p>
                 <div>
                      <router-link tag="dt" v-for="(item,i) in toflower" :key="i" :to="`/detail/${item._id}`" ><img :src="item.coverImg" alt=""></router-link>
                 </div>
                 
             </dl>

         </div>
        <div class="good-rep">
            <h2>好评店铺</h2>
            <p><van-icon name="passed" />&nbsp;&nbsp;新鲜速达</p>
            <p><van-icon name="passed" />&nbsp;&nbsp;质量保证</p>
        </div>
        <div class="good-shop">
            <div class="one" v-for="(item,i) in toShop" :key="i">
                <img :src="item.coverImg" alt="">
                <div>
                    <h2>{{item.name}}</h2>
                    <p>月售{{item.quantity}}</p>
                    <router-link tag="span" :to="'/superm_shop/'+shopId[i].id">进店</router-link>
                </div>
            </div>
            <div></div>
            <div></div>
        </div>
        <h2 class="tuijian">推荐商家</h2>
        <div class="filter">
        <van-dropdown-menu>
             <van-dropdown-item v-model="value" :options="option" />
             <van-dropdown-item title="筛选" ref="item">
               <van-switch-cell v-model="switch1" title="包邮" />
               <van-switch-cell v-model="switch2" title="团购" />
               <van-button block type="info" @click="onConfirm">确认</van-button>
             </van-dropdown-item>
        </van-dropdown-menu>
        </div>
        <div class="more-shop">
            <div class="one-shop" v-for="(item,i) in toShop" :key="i">
                <img  class="logo" :src="item.coverImg" alt="">
                <div class="detail">
                    <h2>{{item.name}}</h2>
                    <p>
                        <span>月售{{item.quantity}}</span>
                        <span>{{item.quantity/40}}分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.quantity/800}}km</span>
                    </p>
                    <p><span>起送￥{{item.quantity/50}}</span><span>配送￥{{item.quantity/200}}</span></p>
                    <p><span><van-icon name="shop-collect-o" /></span><router-link tag="span" :to="'/superm_shop/'+shopId[i].id">进店</router-link></p>
                    <div class="pic">
                        <dl v-for="(v,i) in shopProducts[i]" :key="i">
                            <router-link :to="'/detail/'+v._id">
                                <img style="width:100%" :src="v.coverImg" alt="">
                            </router-link>
                            <dd class="van-ellipsis">{{v.name}}</dd>
                            <dd><span><b>￥{{v.price}}</b>/个</span><p>￥{{parseInt(v.price/10)}}</p></dd>
                        </dl>
                       
                    </div>
                </div>
            </div>
        </div>
      </main>
      
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import * as api from '@/api/getProlist'
export default {
    name:'Supermarket',
    data(){
        return{
            title:'超市',
            value1:0,
            value:0,
            switch1: false,
            switch2: false,
            option1: [
                { text: '品质店铺', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 }
            ],
            option: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 }
            ],
            shopId:[],
            shopProducts:[],
            toShop:[],
            toproduct:[],
            toflower:[]
        }
    },
    methods:{
        onConfirm() {
      this.$refs.item.toggle();
    },
    tap(){
        this.$router.push('/superm_shop')
    }
    },
    mounted(){
        api.getProlist({
            product_category:'5dbc197d440b810ee8ed76a4',
            per:10,
            }).then(data=>{
                this.toShop=data.data.products
        })
        api.getProlist({
            product_category:'5dbc1858440b810ee8ed7698',
            per:2,
            }).then(data=>{
                this.toproduct=data.data.products
                console.log(this.toproduct)
        })
         api.getProlist({
            product_category:'5dbc18a8440b810ee8ed769e',
            per:2,
            }).then(data=>{
                this.toflower=data.data.products
        })
        this.$emit('toparent',[this.title,1])
        this.shopId = this.$store.state.shops
        this.$store.state.shops.map(v=>{
            api.getProlist({
                product_category:v.id,
                per:3,
            }).then(data=>{
                this.shopProducts.push(data.data.products)
            })
        })
    }
}
</script>

<style scoped>
main{
    padding: 0 16px;
    overflow: auto;
    box-sizing: border-box
}
main .home_ser{
    display: flex;
    overflow: hidden;
    padding-top: 15px;
    
}
main .home_ser .moreAdd{
  margin-left: 190px;
  font-size: 24px;
  background: #fff
 }
main .search{
    width:343px;
    height: 32px;
    margin-bottom: 16px;
    margin-top: 10px;
    background:#eee;
    border: none;
    text-align: center;
    font-size: 14px;
    color: #101010;
    border-radius: 5px
}
main .van-swipe .van-swipe-item{
    background: blue
}
main .coupons{
    height: 112px;
    margin-top: 16px;
    background: rgb(240, 134, 48);
    box-sizing: border-box;
    padding: 10px 0 10px 10px
}
main .coupons p:nth-of-type(1){
    line-height: 21px;
    font-size: 16px;
    color: #fff;
}
main .coupons div{
    display: flex;
    margin-top: 5px;
   
}
main .coupons div p:nth-of-type(1){
    width: 157px;
    height: 66px;
    margin-right: 8px;
    background: url(../images/coupons.png);
    display: flex;
    padding-top: 10px;
    box-sizing: border-box;
}
main .coupons div p:nth-of-type(1) span:nth-of-type(1){
    display: block;
    font-size: 14px;
    color: #FB6532;
    margin-left: 5px;
}
main .coupons div p:nth-of-type(1) span:nth-of-type(1) span:nth-of-type(1) b{
    font-size: 20px;
    color: #FB6532;
}
main .coupons div p:nth-of-type(1) .get{
    width: 16px;
    font-size: 16px;
    color: #FB6532;
    margin-left: 20px
}
main .coupons p:nth-of-type(2){
    width: 157px;
    height: 66px;
    background: url(../images/coupons.png);
    display: flex;
    padding-top: 10px;
    box-sizing: border-box;
}
main .coupons div p:nth-of-type(2) span:nth-of-type(1){
    display: block;
    font-size: 14px;
    color: #FB6532;
    margin-left: 5px;
}
main .coupons div p:nth-of-type(2) span:nth-of-type(1) span:nth-of-type(1) b{
    font-size: 20px;
    color: #FB6532;
}
main .coupons div p:nth-of-type(2) .get{
    width: 16px;
    font-size: 16px;
    color: #FB6532;
    margin-left: 20px
}
main .ad{
    margin-top: 16px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    box-shadow: 0 0 20px #ddd
}
main .ad dl{
    width: 175px;
    height: 112px;
   
}
main .ad dl h2{
    font-size: 16px;
    line-height: 21px;
    color: #333;
}
main .ad dl p{
    font-size: 10px;
    line-height: 20px;
    color: #FB6532;
}
main .ad dl div{
    display: flex;
    margin-top: 5px
}
main .ad dl div img{
    width: 72px;
    height: 54px
}

main .shop {
    padding-right: 10px;
    width: 120px;
    background:#74BA42;
    border-radius: 14px 0 14px 0;
    box-sizing: border-box;
    height: 25px;
    

}
main .shop >>> .van-ellipsis{
    color: #fff;
    font-size:6px;
    transform:scale(.95);
}
main .shop >>> .van-dropdown-menu__title::after{
  color:#fff
}
main .shop .van-dropdown-item {
    font-size: 34px;

}
main .good-rep{
    margin: 24px 0 14px 0;
    display: flex;
    height: 22px;
    
}
main .good-rep h2{
    font-size: 16px;
    color: #333;
}
margin .good-rep p{
    font-size: 14px;
    color: #666;
    
}
main .good-rep p:nth-of-type(1){
    margin-left:130px;
    margin-right: 10px;
    color: #666;
}
main .good-rep p:nth-of-type(2){
    color: #666;
}
main .good-shop{
    padding: 10px 0;
    width:100%;
    overflow: auto;
    display: flex;
}
main .good-shop .one{
    display: flex;
    overflow: hidden;
}
main .good-shop .one img{
    display: block;
    width: 70px;
    height:83px;
    transform: scale(1.1);
    margin-right: 10px;
}
main .good-shop .one div{
    padding: 10px 0 0 10px;
}
main .good-shop .one div h2{
   font-size: 14px;
   color: #333;
}
main .good-shop .one div p{
   font-size: 12px;
   color: #333;
   line-height: 20px;
}
main .good-shop .one div span{
   font-size: 12px;
   color: #fff;
   margin-left: 70px;
   padding: 2px 8px;
   background: #66B32E;
   border-radius: 10px;
}

main .good-shop::-webkit-scrollbar{
    display:none;
}
main .good-shop .one{
    margin-right: 20px;
    width: 205px;
    height: 83px;
    flex-shrink: 0;
    box-shadow: 2px 2px 10px #ddd
}
main .tuijian{
    margin: 25px 0 16px 0;
    color: #74BA42;
    line-height: 22px;
    font-size: 16px;
    
}
main .more-shop .one-shop{
    height: 260px;
    display: flex;
    padding: 15px 0 12px 0;
    box-sizing: border-box;
    margin-bottom: 17px;
    border-top: 1px solid #eee
}
main .more-shop .one-shop .logo{
    width: 64px;
    height: 64px;
    border-radius: 10px;
    margin-right:10px   
}
main .more-shop .one-shop:nth-of-type(1) .logo{
  transform:scale(1.2)
}
main .more-shop .one-shop:nth-of-type(5) .logo{
  transform:scale(1.2)
}
main .more-shop .one-shop:nth-of-type(2) .logo{
  transform:scale(1.2)
}
main .more-shop .one-shop .detail{
    border-bottom:1px solid #eee; 
}
main .more-shop .one-shop .detail h2{
    font-size: 16px;
    line-height: 22px;
    color: #333
} 
main .more-shop .one-shop .detail p:nth-of-type(1){
    display: flex
} 
main .more-shop .one-shop .detail p span{
    color: #666
}
main .more-shop .one-shop .detail p:nth-of-type(1) span:nth-child(1){
    display: block;
    font-size: 12px;
    line-height: 17px;
} 
main .more-shop .one-shop .detail p:nth-of-type(1) span:nth-child(2){
    display: block;
    font-size: 10px;
    line-height: 14px;
    margin-left: 130px;
}
main .more-shop .one-shop .detail p:nth-of-type(2){
    display: flex
}

main .more-shop .one-shop .detail p:nth-of-type(2) span:nth-child(1){
    display: block;
    font-size: 12px;
    line-height: 17px;
    margin-right: 20px;
    display: flex
}
main .more-shop .one-shop .detail p:nth-of-type(3) {
    height: 21px;
    box-sizing: border-box;
    display: flex
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(1) .van-icon{
    font-size: 18px;
    margin-right: 10px;
    padding-top: 5px;
    color:red 
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(1){
    font-size:12px;
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(2){
    font-size:12px;
    margin-left: 165px;
    display: block;
    color: #fff;
    border-radius: 21px;
    background: #66B32E;
    padding: 2px 13px;
    text-align: center
}
main .detail .pic{
    display: flex;
    margin-top: 14px;
    overflow:auto;
   
}
main .detail .pic dl{
    width:80px;
    height: 125px;
    background: #fff;
    margin-right: 15px;
    box-shadow: 0 0 8px #eee;
    overflow: hidden;

}
main .detail .pic dl:nth-of-type(2){
   margin:0 10px
}
main .detail .pic dl dt{
    height:62px;
    overflow: hidden;
    margin-bottom: 8px;
    padding-bottom: 10px;
}
main .detail .pic dl dd:nth-of-type(1){
    line-height: 17px;
    font-size: 12px;
    color: #333;
    margin-bottom: 7px;
  
}
main .detail .pic dl dd:nth-of-type(2){
    display: flex;
    font-size: 12px;
    color: #333;
    line-height: 19px; 
}
main .detail .pic dl dd:nth-of-type(2) b{
   color: #FB6532;

} 
main .detail .pic dl dd:nth-of-type(2) span{
   margin-right: 10px;

} 
</style>